<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默默学代码</title>
    <style>
        .floatleftbutton {
            float: left;
            width: 30vw;
            margin: 1vw;
        }
    </style>
</head>

<body style="margin: 0px;">

    <div id="app">
        <div style="
        background-color: #8bc34a;
        text-align: center;
        height: 20vh;
        line-height: 20vh;">
            -webkit-line-clamp
        </div>

        <div style="height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center; "  v-if="awesome" v-on:click="viewdata">
            <div style="text-align: center;">
                <div>
                    <p>

                        请把英文发音和中文解释说出口

                    </p>
                    <p style="color: #009688;">
                        点击屏幕显示答案
                    </p>
                </div>


            </div>




        </div>

        <div v-else>
            <div>
                -webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.

                它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成
                vertical时才有效果

                在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

                当他应用于锚(anchor)元素时,截取动作可以发生在文本中间,而不必在末尾.
            </div>
            <div>
                <button class="floatleftbutton">
                    记住了
                </button>
                <button class="floatleftbutton">
                    模糊
                </button>
                <button class="floatleftbutton">
                    忘记了
                </button>
            </div>


        </div>
    </div>


    <div style="
    position: fixed;
    bottom: 0px;
    text-align: center;
    height: 2em;
">
        复习
        选单词库
        统计
        设置
    </div>
</body>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            awesome: true
        },
        methods: {
            viewdata: function (event) {
                this.awesome = false;
            },
            nextdata: function (event) {

            }
        }
    })
</script>

</html>